<template>
  <game-model @close="close">
    <div class="gift_wrap" v-if="!gift_show">
      <div>
        <!-- 礼品盒 -->
        <div class="gift" @click="openGift">
          <!-- 礼品盒2秒开始抖动 -->
          <img src="../../../images/gift.png" alt="gift.png" :class="{'gift_box': init, 'open_before':!init, 'hide_init': open}">
          <!-- 打开礼品盒 -->
          <img src="../../../images/open_gift.png" alt="open_gift.png" class="open_gift" :class="{'opening': open}">
        </div>
        <div class="words">
          <p>哇！收到一个新手大礼包</p>
          <p>快打开看看吧</p>
        </div>
      </div>
    </div>
    <transition name="fade">
      <gift-bag v-if="gift_show" :coupons="coupons" :game-props="gameProps" :yun="yun"></gift-bag>
    </transition>
  </game-model>
</template>

<script>
import GameModel from './model.vue'
import GiftBag from './bag.vue'
import {openBox} from 'src/service/getData3.js'
import { mapState} from 'vuex'
import { MessageBox, Toast, Indicator } from 'mint-ui';

export default {
  name: 'games',
  components: {
    GiftBag, GameModel
  },
  data: () => ({
    open: false,
    gift_show: false,
    init: true, // 礼包未打开
    open: false,
    coupons: [],
    gameProps: {},
    yun: '',
    loading: false
  }),
  computed: {
    ...mapState({
      usrId: state => state.user.userInfo.usrId,
      position: state => state.coupon.position,
    })
  },
  created() {
  },
  methods: {
    close() {
      document.body.style.overflow = ''
      this.$emit('close')
    },
    async openGift() { // 打开礼盒
      if (this.loading) {
        return
      }
      if (!this.loading) {
        this.loading = true
        this.init = false
        if (this.position) {
          // Indicator.open('正在加载中...')
          this.$store.commit('changeState', true)
          let rep = await openBox({ // 打开礼盒
            usrId: this.usrId,
            position: this.position // '121.419243,31.208285'
          })
          setTimeout(async () => {
            this.open = true
            if (rep.respCode === '00') {
              let list = rep.content.couponSearch;
              list.forEach(item => {
                item.num = rep.content.firstPackage.couponNum
              })
              this.coupons = list
              this.gameProps = rep.content.firstPackage
              this.yun = rep.content.firstPackage.yun
              await this.$nextTick(() => {})
              this.gift_show = true
            } else {
              Toast({
                message: rep.content
              })
              this.$emit('close')
            }
            this.loading = false
          }, 600)
        } else {
          MessageBox('开启定位才能获取礼包！').then(rep => {
            this.$emit('close')
          })
          return
        }
      }

    },
    clickhandle(e) {
      e.preventDefault()
    }
  },
  mounted() {
    document.body.style.overflow = 'hidden'
  },
  beforeRouteLeave(to, from, next){

      next()
  }
}
</script>

<style lang="scss" scoped>
.gift_wrap {
  margin-top: 40%;
  transform: translate(0, -15%);
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */

.fade-enter { // 定义进入过渡的开始状态。
  opacity: 0;
}
.fade-enter-active { // 定义过渡的状态 元素被插入时生效
  opacity: 0;
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter-to { // 定义进入过渡的结束状态
  transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-leave { // 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

}
.fade-leave-active {

}
.fade-leave-to { // 定义进入过渡的结束状态 在元素被插入一帧后生效
  opacity: 0;
  transform: translateY(-100%);
  transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
@keyframes drop {
  0%   {transform: translate(0, -240%);}
  100% {transform: translate(0, 0%);}
}
.gift {
  width: 54%;
  margin: auto;
  transform: translate(0, -240%);
  animation:drop 0.4s ease 0.2s;
  animation-fill-mode: forwards;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 20px 10px;
}
.gift img{
  width: 100%;
  transform-origin: 50% 100%;
  animation-fill-mode: forwards;
  &.gift_box{
    animation: moveImg 0.3s linear infinite 0.8s alternate;
  }
  &.open_before {
    animation: openBefore 0.6s linear infinite;
  }
  &.hide_init {
    animation: hideIng 0.4s linear;
    animation-fill-mode: forwards;
  }
  &.open_gift {
    position: absolute;
    bottom:22px;
    left: 50%;
    transform: translate(-50%,0);
    opacity: 0;
  }
  &.opening {
    animation: openIng 0.4s linear 0.2s;
    animation-fill-mode: forwards;
  }
}
@keyframes moveImg {
  0% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(2deg);
  }
}
@keyframes openBefore {
  0% {
    transform: translate(0, 8px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes openIng {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1
  }
}
@keyframes hideIng {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0
  }
}
.gift-bond{
  width: 8rem;
  color: #fff;
  margin: auto;
  text-align: center;
  div {
    display: inline-block;
    width: 1.4rem;
    height: 3rem;
    border: 3px solid #fff;
    box-sizing: border-box;
    &.bond-right {
      border-radius: 1rem 1rem 2rem 0;
      transform: rotate(45deg);
    }
    &.bond-left {
      border-radius: 1rem 1rem 0 2rem;
      transform: rotate(-45deg);
    }
  }
}
.box_top {
  width: 8rem;
  height: 2.1rem;
  border-radius: 0.3rem;
  background-color: #fff;
  margin: auto;
}
.box_content {
  width: 7.4rem;
  height: 5rem;
  border-radius: 0 0 0.3rem 0.3rem;
  background-color: #fff;
  margin: 0.3rem auto;
}

@keyframes showWord {
  0%   {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
.words {
  text-align: center;
  color: #ec4e8a;
  margin-top: 0.6rem;
  font-size: 1.4rem;
  transform: translateX(-100%);
  animation: showWord .3s ease 0.5s;
  animation-fill-mode: forwards;
  p {
    line-height: 2.6rem;
  }
}


.gift_rule {
  margin-top: 1rem;
  font-size:1rem;
  color: #a5a5a5;
  span:first-child {
    float: left;
  }
  span:last-child {
    float: right;
  }
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}
  .gift-main {
    .coupon .couponDiv {
      margin-top: 0;
      width: 3rem;
      height: 4rem;
      background-size: 16%;
      ._num_price {
        font-size: initial!important;
      }
      ._num_price span {
        font-size: 1.4rem;
      }
   }
  }
 </style>
